<%@ page import="com.sunelec.pojo.Users" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html>
<html lang="en">
<head>
    <title>电站设备信息</title>
    <meta name="renderer" content="webkit" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/deviceInformation.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<script>
    $(document).ready(function(){
        odd= {"background":"white"};//奇数样式
        even={"background":"#EDD9B1"};//偶数样式
        odd_even("#dataTable",odd,even);
    });
    function odd_even(id,odd,even) {
        $(id).find("tr").each(function (index, element) {
            if (index % 2 == 1)
                $(this).css(odd);
            else
                $(this).css(even);
        });
    }
</script>
<body>
<div class="top">
    <div class="top-left">
        <div class="kong"></div>
        <div class="logo">
            <img src="${pageContext.request.contextPath}/static/imgs/logo3.png">
        </div>
    </div>
    <div class="top-right">
        <ul class="list">
            <li><a href="${pageContext.request.contextPath}/powerCenter.action?username=${username}">电站中心</a></li>
            <li><a href="checkCenter.jsp">运维中心</a></li>
            <li><a href="${pageContext.request.contextPath}/InReportCenter">报表中心</a></li>
            <li><a href="${pageContext.request.contextPath}/centralizedControl">展示中心</a></li>
            <% if(session.getAttribute("users")!=null){
                Users users = (Users)session.getAttribute("users");
            %>
            <% if(users.getType()==1){%>
            <li><a href="${pageContext.request.contextPath}/InidManage">账号管理</a></li>
            <% }%>
            <% } %>
            <li><a href="${pageContext.request.contextPath}/checkOut.action" ><span class="fa fa-user"></span></a></li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="left">
    </div>
    <div class="center">
        <div class="block" id="tab">
            <ul class="tabul">
                <li class="active"><span>采集器</span></li>
                <li><span>逆变器</span></li>
                <li><span>电表</span></li>
                <li><span>气象站</span></li>
            </ul>
            <div class="con">
                <table class="table table-bordered table-striped one" id="dataTable">
                    <tr>
                        <th class="text-center">状态</th>
                        <th class="text-center">采集器序列号</th>
                        <th class="text-center">通信方式</th>
                        <th class="text-center">信号强度</th>
                        <th class="text-center">更新时间</th>
                    </tr>
                    <c:forEach var="collectorList" items="${collectorList}">
                        <tr>
                            <td><i class="fa fa-times-circle"></i></td>
                            <td>${collectorList.collectorSn}</td>
                            <td>GPRS</td>
                            <td>
                                <i class="glyphicon glyphicon-signal"></i><span class="strength">强</span>
                            </td>
                            <td><span class="time-hour">9:37</span><span class="time-date">2018/3/19</span></td>
                        </tr>
                    </c:forEach>
                </table>
                <div class="fenye">
                    <div class="row">
                        <div class="col-xs-6 text-right" style="padding-top: 45px;padding-right: 0px;">当前 ${pageInfo.pageNum }页,总${pageInfo.pages }页,总
                            ${pageInfo.total } 条记录
                        </div>
                        <div class="col-xs-6">
                            <nav aria-label="Page navigation">
                                <ul class="pagination" style="margin:0px">
                                    <li><a href="${pageContext.request.contextPath}/showDeviceInfo?powerId=${powerId}&pn=1">首页</a></li>
                                    <!-- 是否有上一页 -->
                                    <c:if test="${pageInfo.hasPreviousPage}">
                                        <li><a href="${pageContext.request.contextPath}/showDeviceInfo?powerId=${powerId}&pn=${pageInfo.pageNum-1}"
                                               aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                                        </a></li>
                                    </c:if>

                                    <c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
                                        <!-- 本页的页码是蓝色，其他为白色 -->
                                        <c:if test="${page_Num == pageInfo.pageNum}">
                                            <li class="active"><a href="#">${page_Num}</a></li>
                                        </c:if>
                                        <c:if test="${page_Num != pageInfo.pageNum}">
                                            <li><a  href="${pageContext.request.contextPath}/showDeviceInfo?powerId=${powerId}&pn=${page_Num}">${page_Num}</a></li>
                                        </c:if>

                                    </c:forEach>

                                    <!-- 是否有下一页 -->
                                    <c:if test="${pageInfo.hasNextPage }">
                                        <li><a href="${pageContext.request.contextPath }/showDeviceInfo?powerId=${powerId}&pn=${pageInfo.pageNum+1}"
                                               aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                                        </a></li>
                                    </c:if>
                                    <li><a href="${pageContext.request.contextPath }/showDeviceInfo?powerId=${powerId}&pn=${pageInfo.pages}">末页</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <div class="con" style="display: none" >
                <table class="table table-bordered" style="background-color: white">
                    <tr>
                        <th rowspan="2" class="text-center">逆变器序列号</th>
                        <th colspan="3" class="text-center">直流输入</th>
                        <th colspan="5" class="text-center">交流输出</th>
                        <th rowspan="2" class="text-center">当日电量(kWh)</th>
                        <th rowspan="2" class="text-center">累计电量(kWh)</th>
                        <th rowspan="2" class="text-center">逆变温度(℃)</th>
                        <th rowspan="2" class="text-center">更新时间</th>
                    </tr>
                    <tr>
                        <td>通道</td>
                        <td>电压(Vdc)</td>
                        <td>电流(Adc</td>
                        <td>相位</td>
                        <td>电压(V)</td>
                        <td>电流(A)</td>
                        <td>功率(W)</td>
                        <td>频率(Hz)</td>
                    </tr>
                    <c:forEach var="inverterList" items="${inverterList}">
                        <tr>
                            <td rowspan="3" class="td3">${inverterList.collectorSn}</td>
                            <td>PV1</td>
                            <td>${inverterList.dc1Voltage}</td>
                            <td>${inverterList.dc1Current}</td>
                            <td>R</td>
                            <td>${inverterList.ac1Voltage}</td>
                            <td>${inverterList.ac1Current}</td>
                            <td rowspan="3" class="td3">1823</td>
                            <td rowspan="3" class="td3">0.0</td>
                            <td rowspan="3" class="td3">${inverterList.dailyElectricity}</td>
                            <td rowspan="3" class="td3">6024</td>
                            <td rowspan="3" class="td3">20.6</td>
                            <td rowspan="3" class="td3"><span class="time-hour"><fmt:formatDate pattern="HH:mm:ss" value="${inverterList.updateTime}" type="both"/></span><span class="time-date"><fmt:formatDate pattern="yyyy-MM-dd" value="${inverterList.updateDate}" type="both"/></span></td>
                        </tr>
                        <tr>
                            <td>PV2</td>
                            <td>${inverterList.dc2Voltage}</td>
                            <td>${inverterList.dc2Current}</td>
                            <td>S</td>
                            <td>${inverterList.ac2Voltage}</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>PV3</td>
                            <td>${inverterList.dc3Voltage}</td>
                            <td>${inverterList.dc3Current}</td>
                            <td>T</td>
                            <td>${inverterList.ac3Voltage}</td>
                            <td>0</td>
                        </tr>

                    </c:forEach>
                    <c:forEach var="errorList" items="${errorList}">
                        <tr>
                            <td>${errorList.collectorSn}</td>
                            <td colspan="12">此逆变器暂无数据，请核实原因...</td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
            <div class="con" style="display: none">
                <table class="table table-striped table-bordered three" >
                    <tr>
                        <th class="text-center">电表序列号</th>
                        <th class="text-center">倍率</th>
                        <th class="text-center">电压(V)</th>
                        <th class="text-center">电流(I)</th>
                        <th class="text-center">有功功率(W)</th>
                        <th class="text-center">无功功率(W)</th>
                        <th class="text-center">功率因素(W)</th>
                        <th class="text-center">频率(Hz)</th>
                        <th class="text-center">正常电能(kWh)</th>
                        <th class="text-center">反向电能(kWh)</th>
                        <th class="text-center">更新时间</th>
                    </tr>
                    <tr class="even">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                    <tr class="odd">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                    <tr class="even">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                    <tr class="odd">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                    <tr class="even">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                    <tr class="odd">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                    <tr class="even">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                    <tr class="odd">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                    <tr class="even">
                        <td>aaaaaaaa</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>1.4</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>设备因素</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td>0.1</td>
                        <td><span class="time-hour">15:44</span><span class="time-date">2018/3/19</span></td>
                    </tr>
                </table>
                <div class="page">
                    <ul class="pagination text-center">
                        <li class="bg"><a href="#">前一页</a></li>
                        <li class="lg"><a href="#">&laquo;</a></li>
                        <li class="active bg"><a href="#">1</a></li>
                        <li class="lg"><a href="#">&raquo;</a></li>
                        <li class="bg"><a href="#">下一页</a></li>
                    </ul>
                </div>
            </div>
            <div class="con" style="display: none">
                <table class="table table-striped table-bordered four">
                    <tr>
                        <th class="text-center">风速</th>
                        <th class="text-center">风向</th>
                        <th class="text-center">大气温度(℃)</th>
                        <th class="text-center">大气湿度</th>
                        <th class="text-center">组件温度(℃)</th>
                        <th class="text-center">总辐射(Gy)</th>
                    </tr>
                    <tr class="even">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="odd">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="even">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="odd">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="even">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="odd">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="even">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="odd">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="even">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                    <tr class="odd">
                        <td>3级</td>
                        <td>西北风</td>
                        <td>20</td>
                        <td>79%</td>
                        <td>10</td>
                        <td>0.5</td>
                    </tr>
                </table>
                <div class="page">
                    <ul class="pagination text-center">
                        <li class="bg"><a href="#">前一页</a></li>
                        <li class="lg"><a href="#">&laquo;</a></li>
                        <li class="active bg"><a href="#">1</a></li>
                        <li class="lg"><a href="#">&raquo;</a></li>
                        <li class="bg"><a href="#">下一页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
//        tab选项卡
        var tab=document.getElementById('tab');
        var lis=tab.getElementsByTagName('li');
        var con=tab.getElementsByClassName('con');
        for(var i=0;i<lis.length;i++){
            lis[i].xuhao=i;
            lis[i].onclick=function () {
                for(var j=0;j<con.length;j++){
                    con[j].style.display='none';
                    lis[j].classList.remove('active')
                }
                con[this.xuhao].style.display='block';
                lis[this.xuhao].setAttribute('class','active')

            }
        }
    }
</script>
</body>
</html>
